{% extends "base.html" %}

{% block title %}成绩管理 - 学生成绩管理系统{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/common.css') }}">
{% endblock %}

{% block content %}
<div class="score-wrapper">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="page-title">
            <i class="fas fa-chart-line text-primary"></i>
            {% if session.get('role') == '0' %}
            我的成绩
            {% else %}
            成绩管理
            {% endif %}
        </h2>
        {% if session.get('role') != '0' %}
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addScoreModal">
            <i class="fas fa-plus"></i> 添加成绩
        </button>
        {% endif %}
    </div>
    
    <div class="card mb-4">
        <div class="card-body">
            <div class="row">
                <div class="col-md-3">
                    <div class="input-group">
                        <span class="input-group-text"><i class="fas fa-search"></i></span>
                        {% if session.get('role') != '0' %}
                        <input type="text" class="form-control" id="searchInput" placeholder="搜索学号或姓名...">
                        {% endif %}
                        
                        {% if session.get('role') == '0' %}
                        <input type="text" class="form-control" id="searchInput" disabled placeholder="搜索学号或姓名...">
                        {% endif %}
                    </div>
                </div>
                <div class="col-md-3">
                    {% if session.get('role') != '0' %}
                    <select class="form-select" id="classFilter">
                        <option value="">所有班级</option>
                    </select>
                    {% endif %}
                    {% if session.get('role') == '0' %}
                    <select class="form-select" disabled id="classFilter">
                        <option value="">当前班级</option>
                    </select>
                    {% endif %}
                </div>
                <div class="col-md-3">
                    <select class="form-select" id="courseFilter">
                        <option value="">所有课程</option>
                    </select>
                </div>
                <div class="col-md-1">
                    <button type="button" class="btn btn-outline-secondary w-100" onclick="resetFilters()">
                        <i class="fas fa-redo"></i> 重置
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h5 class="card-title mb-0">
                <i class="fas fa-list"></i> 成绩列表
                <span class="badge bg-primary ms-2" id="listCount">0</span>
            </h5>
        </div>
        <div class="card-body">
            <div id="loadingSpinner" class="text-center py-4">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">加载中...</span>
                </div>
                <p class="mt-2 text-muted">正在加载成绩数据...</p>
            </div>

            <div class="table-responsive" id="scoreTableContainer" style="display: none;">
                <table class="table table-hover" id="scoreTable">
                    <thead class="table-light">
                        <tr>
                            <th>学号</th>
                            <th>姓名</th>
                            <th>班级</th>
                            <th>课程</th>
                            <th>成绩</th>
                            <th>考试日期</th>
                            <th>备注</th>
                            <th>创建时间</th>
                            {% if session.get('role') != '0' %}
                            <th>操作</th>
                            {% endif %}
                        </tr>
                    </thead>
                    <tbody id="scoreTableBody">
                    </tbody>
                </table>
            </div>

            <div id="emptyState" class="text-center py-5" style="display: none;">
                <i class="fas fa-chart-line fa-3x text-muted mb-3"></i>
                <h5 class="text-muted">暂无成绩数据</h5>
                <p class="text-muted">点击上方"添加成绩"按钮开始添加成绩</p>
            </div>
        </div>
    </div>

    <div aria-label="成绩分页" class="mt-4">
        <ul class="pagination justify-content-center" id="pagination">
        </ul>
    </div>
</div>

<!-- 添加成绩模态框 -->
<div class="modal fade" id="addScoreModal" tabindex="-1" aria-labelledby="addScoreModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addScoreModalLabel">
                    <i class="fas fa-plus text-primary"></i> 添加成绩
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="addScoreForm">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="addScoreStudent" class="form-label">学生 <span class="text-danger">*</span></label>
                                <select class="form-select" id="addScoreStudent" name="student_id" required>
                                    <option value="">请选择学生</option>
                                </select>
                                <div class="invalid-feedback">请选择学生</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="addScoreCourse" class="form-label">课程 <span class="text-danger">*</span></label>
                                <select class="form-select" id="addScoreCourse" name="course_id" required>
                                    <option value="">请选择课程</option>
                                </select>
                                <div class="invalid-feedback">请选择课程</div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="addScoreValue" class="form-label">成绩</label>
                                <input type="number" class="form-control" id="addScoreValue" name="score"
                                       placeholder="如：85.5" min="0" max="100" step="0.1">
                                <div class="form-text">成绩范围：0-100分</div>
                                <div class="invalid-feedback">请输入有效的成绩</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="addScoreExamDate" class="form-label">考试日期</label>
                                <input type="date" class="form-control" id="addScoreExamDate" name="exam_date">
                                <div class="invalid-feedback">请选择考试日期</div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="addScoreRemark" class="form-label">备注</label>
                                <textarea class="form-control" id="addScoreRemark" name="remark" rows="3"
                                          placeholder="请输入备注信息（可选）"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> 保存成绩
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 编辑成绩模态框 -->
<div class="modal fade" id="editScoreModal" tabindex="-1" aria-labelledby="editScoreModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editScoreModalLabel">
                    <i class="fas fa-edit text-warning"></i> 编辑成绩
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="editScoreForm">
                <div class="modal-body">
                    <input type="hidden" id="editScoreId" name="id">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="editScoreStudent" class="form-label">学生 <span class="text-danger">*</span></label>
                                <select class="form-select" id="editScoreStudent" name="student_id" required>
                                    <option value="">请选择学生</option>
                                </select>
                                <div class="invalid-feedback">请选择学生</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="editScoreCourse" class="form-label">课程 <span class="text-danger">*</span></label>
                                <select class="form-select" id="editScoreCourse" name="course_id" required>
                                    <option value="">请选择课程</option>
                                </select>
                                <div class="invalid-feedback">请选择课程</div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="editScoreValue" class="form-label">成绩</label>
                                <input type="number" class="form-control" id="editScoreValue" name="score"
                                       placeholder="如：85.5" min="0" max="100" step="0.1">
                                <div class="form-text">成绩范围：0-100分</div>
                                <div class="invalid-feedback">请输入有效的成绩</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="editScoreExamDate" class="form-label">考试日期</label>
                                <input type="date" class="form-control" id="editScoreExamDate" name="exam_date">
                                <div class="invalid-feedback">请选择考试日期</div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="editScoreRemark" class="form-label">备注</label>
                                <textarea class="form-control" id="editScoreRemark" name="remark" rows="3"
                                          placeholder="请输入备注信息（可选）"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-warning">
                        <i class="fas fa-save"></i> 更新成绩
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 删除成绩模态框 -->
<div class="modal fade" id="deleteScoreModal" tabindex="-1" aria-labelledby="deleteScoreModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteScoreModalLabel">
                    <i class="fas fa-exclamation-triangle text-danger"></i> 确认删除
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>您确定要删除成绩记录 <strong id="deleteScoreInfo"></strong> 吗？</p>
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle"></i>
                    <strong>警告：</strong>删除成绩记录后将无法恢复，此操作不可撤销！
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">
                    <i class="fas fa-trash"></i> 确认删除
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/admin/score.js') }}"></script>
{% endblock %}